打包Vue專案

修改vite.config.js

• 添加base: './',

讓專案使用相對路徑而不是絕對路徑。

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: './',
})

輸入bun run build，打包專案。

bun run build

在Linux部署專案

現在把Vue專案、後端打包後的jar傳送到linux VPS（Ubuntu）中。

後端

安裝MariaDB

sudo apt-get install mariadb-server

在開機時啟動mariaDB

sudo systemctl enable mariadb

進行資料庫的設定

sudo mysql_secure_installation

首先會詢問密碼，因為我們剛安裝，所以密碼是空的，直接按Enter。

• Switch to unix_socket authentication [Y/n] n
• Change the root password? [Y/n] y

問我們要不要改密碼，輸入y再Enter，輸入兩次新密碼後，成功修改密碼。

• Remove anonymous users? [Y/n] y

移除anonymous用戶，維持資料庫的安全。

• Disallow root login remotely? [Y/n] y

只能用localhost的方式，連接MariaDB，可以避免資料庫外洩。

• Remove test database and access to it? [Y/n] y

移除測試用的資料庫

• Reload privilege tables now? [Y/n] y

重新載入權限表，套用我們剛設定的內容。

我們登入MariaDB

mariadb --user root --password

輸入密碼後，就能進入管理頁面。

建立cart_db資料庫

CREATE DATABASE cart_db;

輸入exit，離開管理頁面

啟動後端

java -jar shopping_cart_project-0.0.1-SNAPSHOT.jar

記得把.env跟jar放在一起

前端

Nginx

安裝nginx，用來顯示Vue專案。

sudo apt-get install nginx

修改/etc/nginx/sites-available/default，從預設的port 80改成5173。

sudo nano /etc/nginx/sites-available/default

一打開就能看到

server {
        listen 80 default_server;
        listen [::]:80 default_server;

把80改成5173，確認修改後離開。

重新啟動nginx，才能套用新的port設定。

sudo systemctl restart nginx

讓nginx開機時啟動

sudo systemctl enable nginx

把vue專案下dist資料夾的內容：assets資料夾、favicon.ico、index.html，放到VPS的/usr/share/nginx/html中。

確認後端正常運作後，連接VPS的IP:5173，就能完成將專案部署到Linux VPS上的目標。

tmux

不過我們中斷和VPS的SSH連線後，後端會停止運作。

使用tmux讓後端維持運作

tmux

然後啟動後端

java -jar shopping_cart_project-0.0.1-SNAPSHOT.jar

現在切斷連線，也能繼續運作了。

切斷連線後，想要結束後端，可以輸入

tmux attach -t 0

按下Ctrl+C結束後端程式，輸入exit，關閉這個session。

求職

來看看求職網站的職缺要求。

• 第一個：要求Java、Web、SQL

Java就不用說了，Spring Boot和Java相關，通過。

Web：我們使用Thymeleaf有使用到HTML，後面還學習了前端框架，100%通過。

SQL：電商專案時，有寫一點SQL語句，勉強通過。

三項中，有兩項達成要求，學過我們的教學就能去應徵了。

• 第二個：Java、JavaScript、TypeScript、React、Spring Boot

除了TypeScript沒學到，其餘的在教學中都能學過一點。

• 第三個

我們符合1、4、5，RESTful API也是一種Web API。

這三個職位，我們可以嘗試去應徵了。

一切的一切預告在前，後端工程師也要會前端工具，Spring Boot教學中有前端框架的部分是有必要的，不是突然插入這部分的教學。

跟著我的教學可以學到實作，不過別忘了補充基礎，不然無法回答面試的問題，因為面試時會考這些基本知識。

結尾

在2019年，我使用Python+Flask+SQLite實作一個網頁的點餐以及管理系統。

我向多家公司投遞履歷，其中也包含了這個專案。

在面試時，我展示了這個專案的優點，以及如何節省人力以面對未來的缺工，可惜公司不感興趣，只表示錄取後會通知。

最後，我就將專案放著不管。

沒想到，我只是看的太前面了。

疫情大爆發後，廠商紛紛投入研發QR Code點餐系統。

我一直在想，當時如果使用Java+Spring Boot+MySQL完成同樣的專案，能不能得到企業的青睞呢？

於是，我開始學習這些技術，發覺網路上缺乏Spring Boot實戰相關的內容，只好參加十萬的課程學習如何完成Spring Boot專案。

2024年，我身為一個Spring Boot的高手，為了那些像當時的我一樣的人，編寫這一系列的文章，讓大家不用花十萬學如何做Spring Boot專案，希望這些文章能讓大家有不少的收穫。